.innerPage{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.banner{
    background: linear-gradient(90deg, #0052D9 0%, #00C2FF 144.7%);
    height: 98px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 20px;

    .left{
        flex: 1;
        display: flex;
        align-items: center;
        .icon{
            display: block;
            width: 50px;
        }
        .text{
            font-size: 18px;
            color: #fff;
            margin-left: 15px;
        }
    }

    .right{
        font-size: 18px;
        color: #fff;
    }
}

.cards{
    display: flex;
    gap: 20px;

    .card{
        flex: 1;
    }

    .top{
        display: flex;
        .left{
            flex: 1;
        }

        .name{
            font-size: 14px;
            color: rgba(0, 0, 0, 0.6);
        }

        .num{
            font-size: 28px;
            color: #000;
        }
        .unit{
            font-size: 12px;
        }

        .icon{
            display: block;
            width: 50px;
        }
    }

    .bottom{
        display: flex;
        margin-top: 10px;
    }
}


.chartCards{
    display: flex;
    gap: 20px;

    .card{
        flex: 1;
    }

    .header{
        display: flex;
        align-items: center;
        .left{
            flex: 1;
            display: flex;
            align-items: center;
        }
        .iconTon{
            border-radius: 50%;
            width: 32px;
            height: 32px;
            background: rgba(242, 243, 255, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: $primaryColor;
            font-size: 16px;
        }
        .name{
            font-size: 20px;
            color: #000;
            margin-left: 15px;
        }
    }

    .pieTon{
        display: flex;
        align-items: center;
    }

    .pieChart{
        height: 240px;
    }

    .categoryItems{
        
        .item{
            padding: 0 20px;
            display: flex;
            align-items: center;
            padding-bottom: 10px;
            border-bottom: 1px solid #E7E7E7;
            margin-top: 10px;
            &:first-of-type{
                margin-bottom: 0;
            }


            .icon {
                width: 36px;
                line-height: 36px;
                text-align: center;
                font-size: 16px;
                border-radius: 8px;
                background: rgba(217, 225, 255, 1);
                color: rgba(0, 0, 0, 0.6);

            }
            .text{
                font-size: 16px;
                color: rgba(0, 0, 0, 0.9);
                margin-left: 15px;
            }
        }
    }


    .barChart{
        height: 240px;
    }
}